<template>
    <div>
        <div>
            <van-image src="/static/img/loginTop.png" />
        </div>
        <div class="input-box">
            <van-cell-group inset>
                <van-field v-model="user.mobile" type="tel" label="手机号" placeholder="填写手机号">
                    <template #button>
                        <van-button v-if="isCountDown" size="small" type="info"
                            class="white-font">({{ countDownTime }})秒</van-button>
                        <van-button v-if="!isCountDown" size="small" type="info" class="white-font"
                            @click="getCode">获取验证码</van-button>
                    </template>
                </van-field>
                <van-field v-model="user.inputCode" type="number" label="验证码" placeholder="填写验证码" />
            </van-cell-group>
        </div>

        <div class="btn-box">
            <van-button style="margin-bottom: 2vh;" type="info" @click="login">登录</van-button>
            <van-button type="primary" class="white-btn" @click="wxLogin">微信登录</van-button>
        </div>

        <div class="reg-btn">
            没有账号? <span @click="goToReg" class="g-text">申请注册</span>
        </div>
    </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getToken, isMobile, isWx, log, LOCAL_USER, LOCAL_WX } from "../utils/user"
import { getMobileCode, codeLogin } from "../api/index"
import { wxOauth } from "../api/wx"
import { showToast } from 'vant';


// 1 判断是否已登录 检查token 然后跳转到home
// 2 账号输入登录 尝试绑定微信
// 3 微信登录  检查账号是否已注册
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        onMounted(() => {
            const token = getToken();
            if (token) {
                //1 跳转到home
                router.push("/Index")
            } else {

                let openId = route.params.id ? route.params.id : ""
                console.log("openId", route.params)
                if (openId) {
                    getWxId({ open_id: openId }).then(res => {
                        if (res.success) {
                            showToast('登录成功');
                            log("login", "dd");
                            localStorage.setItem(LOCAL_USER, JSON.stringify(res.data));
                            localStorage.removeItem(LOCAL_WX);
                            //2 账号登录
                            router.push("/Index")
                        } else {
                            showToast(res.msg);
                        }
                    })
                }
            }
        })
        const user = reactive({
            mobile: "18601565971",
            inputCode: "341212",
        })
        const isCountDown = ref(false)
        const countDownTime = ref(0);
        const startTime = 60;

        let randomCode = "";
        let timeId = 0;

        //获取验证码
        const getCode = () => {
            if (!user.mobile) {
                showToast('请输入手机号');
                return
            }
            if (!isMobile(user.mobile)) {
                showToast('请输入正确的手机号');
                return
            }
            getMobileCode({ code: user.code, mobile: user.mobile }).then(res => {
                log("res", res)
                if (res.status == 'ok') {
                    //授权码
                    randomCode = res.data
                    isCountDown.value = true;
                    countDownTime.value = startTime

                    showToast('验证码获取成功');

                    //倒计时
                    timeId = setInterval(() => {
                        countDownTime.value = countDownTime.value - 1;
                        if (countDownTime.value < 0) {
                            clearInterval(timeId)
                            isCountDown.value = false;
                        }
                    }, 1000)
                }
            })

        }

        //账号登录
        const login = () => {
            if (!user.mobile) {
                showToast('请输入手机号');
                return
            }
            if (!isMobile(user.mobile)) {
                showToast('请输入正确的手机号');
                return
            }
            if (!user.inputCode) {
                showToast('请输入验证码');
                return
            }
            console.log('userInput', user.inputCode, randomCode)
            // if (user.inputCode+'' != randomCode) {
            //     showToast('请输入正确的验证码');
            //     return
            // }
            codeLogin({ code: user.code, mobile: user.mobile }).then(res => {
                if (res.status == 'ok') {
                    showToast('登录成功');
                    log("login", "dd");
                    localStorage.setItem(LOCAL_USER, JSON.stringify(res.data));
                    localStorage.removeItem(LOCAL_WX);
                    // wxBind(res.data.uid)
                    //2 账号登录
                    router.push("/Index")
                } else {
                    showToast(res.msg);
                }
            })
        }

        const wxBind = (uid) => {
            if (!isWx()) {
                router.push("/home")
                return
            }
            let oauthData = {
                from: "orgWebBind",
                uid: uid
            }
            // 绑定微信信息
            wxOauth(oauthData).then(res => {
                location.href = res.data.data.url
            })
        }
        //微信登录
        const wxLogin = () => {
            if (!isWx()) {
                showToast("请使用微信浏览器打开")
                return
            }
            let oauthData = {
                from: "webLogin"
            }
            // 获取openId
            wxOauth(oauthData).then(res => {
                localStorage.setItem(LOCAL_WX, "ok");
                location.href = res.data.data.url
            })
        }
        const goToReg = () => {
            router.push("Registe")
        }
        return {
            getCode,
            login,
            wxLogin,

            user,
            isCountDown,
            countDownTime,
            goToReg
        }
    }
}
</script>

<style scoped>
.input-box {
    margin-top: 15vh;
}

.btn-box {
    margin: 4vh 5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.reg-btn {
    font-size: 12px;
    padding: 0 25px;
}

.g-text {
    color: #49B9AD;
}
</style>